<template>
  <div>
    <div>
      <Row class="header" type="flex" justify="start">
        <Col span="24">
          <Icon class="icon" type="ios-podium-outline"/>
          <span class="title">业务办理率占比</span>
        </Col>
      </Row>
      <br>
      <div id="staffAcceptance1" :style="{ width: width + 'px', height: height + 'px'}"></div>
    </div>
    <!-- <div>
      <Modal v-model="workModalInfo.show" :title="workModalInfo.title" width="1000">
        <Table border :columns="workInfoColumns" :data="workInfoList" ref="table3" style="margin-top: 30px"></Table>
        <Row v-if="workModalInfo.loading == true">
          <Col class="demo-spin-col" span="8" offset="8">
            <Spin fix>
              <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
              <div>数据正在加载</div>
            </Spin>
          </Col>
        </Row>
      </Modal>
    </div> -->
  </div>
</template>

<script>
import echarts from 'echarts'
// import { getReturnList } from '@/api/eventlist'
export default {
  name: 'StaffAcceptanceEchart',
  data () {
    return {
      chartData: [],
      workInfoList: [],
      workModalInfo: {
        show: false, loading: true, zhuan_num: 0
      }
    }
  },
  props: {
    width: {
      type: Number,
      default: () => {
        return 500
      }
    },
    height: {
      type: Number,
      default: () => {
        return 300
      }
    }
  },
  mounted () {
  },
  methods: {
    chart (data) {
      // console.log(data)
      this.chartData = data
      // console.log(this.chartData + 'bbbbbbbbbbbbbb')
      let option = {
        title: {
          text: ''
        },
        textStyle: {
          color: '#bababa'
        },
        legend: {},
        dataset: {
          // dimensions: ['dzzz_wait', 'pu_num', 'zhuan_num'],
          dimensions: ['value', 'name'],
          source: []
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b} : {c.value} ({d}%)'
          formatter: function (params, ticket, callback) {
            // console.log(params.value, '223344')
            return params.value.name + ': ' + params.value.value + '件  (' + params.percent + '%)'
          }
        },
        series: [
          {
            name: '业务办理量占比',
            type: 'pie',
            // radius: '55%',
            // center: ['40%', '50%'],
            data: data.seriesData,
            itemStyle: {
              // 鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chartData.forEach(item => {
        console.log(item.dzzz_wait + 'ccccccccccccccc')
        if (item.dzzz_wait) {
          option.dataset.source.push({
            name: '电子即办件',
            value: item.dzzz_wait
          })
        }
        if (item.pu_num) {
          option.dataset.source.push({
            name: '普通即办件',
            value: item.pu_num
          })
        }
        if (item.zhuan_num) {
          option.dataset.source.push({
            name: '流转件',
            value: item.zhuan_num
          })
        }
        console.log(option.dataset.source, 'aaaaaaaaaaaa')
      })
      let myChart = echarts.init(document.getElementById('staffAcceptance1'))
      myChart.setOption(option)
    },
    init () {
      this.workInfoList = []
      this.workModalInfo.loading = true
      let param = {
        'zhuan_num': this.workModalInfo.zhuan_num
      // 'pageNo': this.workModalInfo.currentPageNo,
      // 'pageSize': this.workModalInfo.currentPageSize
      }
      getReturnList(param).then(ret => {
        if (ret.data.errcode === 0) {
          this.workModalInfo.loading = false
          this.workModalInfo.totalRecord = ret.data.data.totalRecord
          this.workInfoList = ret.data.data.results
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    changePagesize (pageSize) {
      this.workModalInfo.currentPageSize = pageSize
      this.changePageNo()
    },
    changePageNo (pageNo) {
      this.workModalInfo.currentPageNo = pageNo
      this.init()
    }
  }
}
</script>

<style scoped>
  .header {
    height: 30px;
  }

  .icon {
    font-size: 28px;
    font-weight: 600;
    margin-right: 5px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
  }
</style>
